<template>
  <div class="footer">

    <div class="footer-left">
      <p><input type="checkbox" v-model="isChecked">已完成&nbsp<span>{{completeTrue}}&nbsp</span>全部&nbsp<span>{{todos.length}}</span></p>

    </div>
    <div class="footer-right">
      <input type="submit" value="清除已完成任务" @click="delCompleted" v-show="completeTrue"></input>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    todos: Array,
    delCompleted: Function,
    selectAllToodo: Function
  },
  computed: {
      //利用计算属性得出todos里面所有为true的items
    completeTrue() {
      return this.todos.reduce((preTotal, todo) => preTotal + (todo.complete ? 1 : 0), 0);
    },
    // 读取两个布尔值并且还要更新数据
    isChecked: {
      get() {
        //   当todos里面为true的item数量和todos的长度相同时
        return this.completeTrue === this.todos.length && this.todos.length>0;   
      },
      set(value) {
        //   将当前isChecked的返回值传递给APP里，将todos里的complete属性设置为传递进来的value（value是布尔值）
        this.selectAllToodo(value);
      }
    }
  }
};
</script>

<style scoped>
.footer {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #c1cedd;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.footer-left {
  background: transparent;
  text-align: center;
  padding: 0 5px;
}
.footer-left input {
  margin-right: 20px;
}
.footer-right {
  /* background: #cc0; */

  height: 28px;
}
.footer-right input {
  color: #fff;
  outline: none;
  background: #ff4757;
  height: 28px;
  border: 1px solid transparent;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin-right: 15px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}
.footer-right input:hover {
  color: #000;
  background: #fff;
}
</style>